<template>
  <div class="article-list">
    <h1>新闻列表</h1>
    <div v-if="authStore.user" class="actions">
      <router-link to="/articles/create" class="btn">发表新闻</router-link>
    </div>
    
    <div v-for="article in articles" :key="article.id" class="article-card">
      <h2>
        <router-link :to="`/articles/${article.id}`">{{ article.title }}</router-link>
      </h2>
      <p class="summary">{{ article.summary }}</p>
      <div class="meta">
        <span>作者: {{ article.username }}</span>
        <span>发布时间: {{ formatDate(article.createdAt) }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { getList, TableName } from '@/api/index.js';
import { useAuthStore } from '@/stores/auth.js';

export default {
  setup() {
    const authStore = useAuthStore();
    const articles = ref([]);

    const loadArticles = async () => {
      const result = await getList(TableName.Articles);
      if (result?.data) {
        articles.value = result.data;
      }
    };

    onMounted(loadArticles);

    return {
      authStore,
      articles
    };
  }
};
</script>

<style scoped>
.article-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.article-card {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.summary {
  color: #666;
  margin: 10px 0;
}
.meta {
  font-size: 0.9em;
  color: #888;
}
.meta span {
  margin-right: 15px;
}
.actions {
  margin-bottom: 20px;
}
.btn {
  display: inline-block;
  padding: 8px 15px;
  background-color: #42b983;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}
</style>